<template>
  <div class="page">
    <div class="btns">
      <el-button type="primary" @click="addBtn('addBtn')">添加</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="name" label="作业名称" width="150" />
      <el-table-column prop="status" label="作业状态" width="120" />
      <el-table-column prop="downDate" label="布置时间" width="120" />
      <el-table-column prop="upDate" label="上交时间" width="120" />
      <el-table-column prop="number" label="完成人数" width="120" />
      <el-table-column fixed="right" label="操作" min-width="200">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="detail(scope.row, 'detail')">
            详情
          </el-button>
          <el-button link type="primary" size="small" @click="editBtn(scope.row, 'editBtn')">编辑</el-button>
          <el-button link type="primary" size="small" @click="delBtn(scope.row, 'delBtn')">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" :title="title" width="700" :before-close="handleClose">
      <el-descriptions :label-width="'50px'" :column="1" border v-if="isShow == 'detail'">
        <el-descriptions-item label="作业名称：" label-align="right" align="center" label-class-date="my-label"
          class-date="my-content" width="150px">
          {{ currentStudent.name }}
        </el-descriptions-item>
        <el-descriptions-item label="作业状态：" label-align="right" align="center" label-class-date="my-label"
          class-date="my-content" width="150px">
          {{ currentStudent.status }}
        </el-descriptions-item>
        <el-descriptions-item label="布置时间：" label-align="right" align="center">
          {{ currentStudent.downDate }}
        </el-descriptions-item>
        <el-descriptions-item label="上交时间：" label-align="right" align="center">
          {{ currentStudent.upDate }}
        </el-descriptions-item>
        <el-descriptions-item label="完成人数：" label-align="right" align="center">
          {{ currentStudent.number }}
        </el-descriptions-item>
        <el-descriptions-item label="学分：" label-align="right" align="center">
          {{ currentStudent.creditBtn }}
        </el-descriptions-item>
        <el-descriptions-item label="备注：" label-align="right" align="center">
          {{ currentStudent.remark }}
        </el-descriptions-item>
      </el-descriptions>
      <el-form :model="tableData" label-width="auto" style="max-width: 600px" v-if="isShow == 'editBtn'|| isShow == 'addBtn'">
        <el-form-item label="*  作业名称：">
          <el-input v-model="currentStudent.name" />
        </el-form-item>
        <el-form-item label="*  作业状态：">
          <el-input v-model="currentStudent.status" />
        </el-form-item>
        <el-form-item label="布置时间：">
          <el-input v-model="currentStudent.downDate" />
        </el-form-item>
        <el-form-item label="上交时间：">
          <el-input v-model="currentStudent.upDate" />
        </el-form-item>
        <el-form-item label="完成人数：">
          <el-input v-model="currentStudent.number" />
        </el-form-item>
        <el-form-item label="学分：">
          <el-input v-model="currentStudent.creditBtn" />
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="currentStudent.remark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="submit">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { add, getList, del, edit } from '../api/workList'
const dialogVisible = ref(false)
const title = ref()
const currentStudent = ref()
const isShow = ref()
const tableData = ref(null)

const get = async () => {
  const res = await getList()
  tableData.value = res.data
  console.log('tableData.value', tableData.value)
}
const verify = () => {
  if (!currentStudent.value.name || !currentStudent.value.status) {
    alert('请录入必要信息')
    return false
  } else {
    return true
  }
}
const addBtn = (tag) => {
  isShow.value = tag
  currentStudent.value = {}
  title.value = '添加作业信息'
  dialogVisible.value = true
}
const submit = async (item) => {
  if (!verify()) return false
  
  dialogVisible.value = false
    try {
      if (isShow.value == 'editBtn') {
        await edit(currentStudent.value)
      } else {
        await add(currentStudent.value)
      }
      get()
    } catch (error) {
      console.error('登录失败', error)
    }
}
const detail = (item, tag) => {
  isShow.value = tag
  currentStudent.value = item
  console.log('currentStudent.value', currentStudent.value)
  title.value = item.name + '作业的信息详情'
  dialogVisible.value = true

  console.log(item.id)
}
const editBtn = (item, tag) => {
  isShow.value = tag

  currentStudent.value = item

  title.value = '编辑' + item.date + '的信息'
  dialogVisible.value = true
  console.log(item.id)
}
const delBtn = async (item, tag) => {
    try {
      await del({id: item.id})
      get()
    } catch (error) {
      console.error('删除失败', error)
    }
}
const handleClose = () => {
  dialogVisible.value = false

}
onMounted(() => {
  get()
})
</script>
<style lang="scss" scoped></style>